<template>
  <div id="advertising-space-create" class="Row_content" style="width:560px;">
    <Form ref="formInline" :model="formInline" :rules="ruleValidate" :label-width="110">
      <FormItem label="广告位名称：" prop="adPlaceName">
        <Input
          v-model="formInline.adPlaceName"
          placeholder="请输入"
          class="input-wid"
          :maxlength="15"
          @on-keyup="filteradPlaceName"
        ></Input>
      </FormItem>
      <FormItem label="渠道：" prop="channelId">
        <Row type="flex" style="width:430px;">
          <Col>
            <Select v-model="formInline.channelId" class="input-wid">
              <Option
                v-for="(item, index) in channelList"
                :value="item.value"
                :key="index"
              >{{item.label}}</Option>
            </Select>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="广告位类型：" prop="adPlaceType">
        <Select v-model="formInline.adPlaceType" class="input-wid" @on-change="selectadPlaceType">
          <Option
            v-for="(item, index) in advertisingSpaceList"
            :value="item.value"
            :key="index"
          >{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="广告类型：" prop="adType">
        <Select v-model="formInline.adType" class="input-wid" @on-change="delmediaUrl">
          <Option
            v-for="(item, index) in advertisingList"
            :value="item.value"
            :key="index"
          >{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="默认广告展示：" prop="mediaUrl" class="upload-img">
        <Row type="flex" align="top">
          <Col>
            <Upload
              ref="upload"
              :format="formInline.adType==='0'?['jpg','png']:['mp4']"
              :max-size="10240"
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              type="drag"
              :show-upload-list="false"
              :action="$config.uploadImg"
              style="display: inline-block;width:96px;"
            >
              <img
                v-if="!formInline.mediaUrl"
                :src="defaultUrl"
                style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                alt
              />
              <img
                v-if="formInline.adType==='0' && formInline.mediaUrl"
                :src="formInline.mediaUrl?formInline.mediaUrl:defaultUrl"
                style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                alt
              />
              <video
                v-if="formInline.adType==='1' && formInline.mediaUrl"
                :src="formInline.mediaUrl?formInline.mediaUrl:defaultUrl"
                style="display: inline-block;width:96px;height:96px;vertical-align: top;"
              ></video>
            </Upload>
            <p v-if="formInline.mediaUrl && imgloaded" class="replace_tit" @click="delmediaUrl">删除</p>
          </Col>
          <Col>
            <div
              v-if="formInline.adType==='0'"
              style="width:118px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;"
            >支持格式：.jpg、.png规格</div>
            <div
              v-if="formInline.adType==='1'"
              style="width:160px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;"
            >视频格式，大小 ＜ 10MB ,建议时长9-30秒,建议宽高比16:9，支持视频格式类型：mp4</div>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Button type="primary" class="btn" @click="handleSubmit">确定</Button>
        <Button class="btn" style="margin-left: 24px" @click="closePage">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import { adplaceSave } from '@/api/advertising/index'
export default {
  name: 'advertising_space_create',
  data () {
    return {
      submitLock: false,
      // 渠道
      channelList: [
        { value: '0', label: '微信' },
        { value: '1', label: '一体机' },
        { value: '2', label: '刷卡器' },
        { value: '3', label: '收银台' },
        { value: '4', label: '口碑' },
        { value: '5', label: '美团' }
      ],
      // 广告位类型
      advertisingSpaceList: [
        { value: '0', label: 'Banner' },
        { value: '1', label: '启动页全屏' },
        { value: '2', label: '通栏' }
      ],
      // 广告类型
      advertisingList: [
        { value: '0', label: '静态图片' },
        { value: '1', label: '视频' }
      ],
      formInline: {
        adPlaceName: '',
        channelId: '',
        adPlaceType: '',
        adType: '',
        mediaUrl: ''
      },
      imgloaded: false,
      defaultUrl: require('@/assets/images/add.png'),
      ruleValidate: {
        adPlaceName: [{ required: true, message: '广告位名称不能为空', trigger: 'blur' }],
        channelId: [{ required: true, message: '请选择渠道', trigger: 'change' }],
        adPlaceType: [{ required: true, message: '请选择广告位类型', trigger: 'change' }],
        adType: [{ required: true, message: '请选择广告类型', trigger: 'change' }],
        mediaUrl: [{ required: true, message: '请选择默认广告展示', trigger: 'change' }]
      }
    }
  },
  methods: {
    filteradPlaceName () {
      this.formInline.adPlaceName = this.formInline.adPlaceName.replace(/\s+/g, '')
    },
    // 选择广告类型
    selectadPlaceType () {
      if (this.formInline.adPlaceType === '1') {
        this.advertisingList = [
          { value: '0', label: '静态图片' },
          { value: '1', label: '视频' }
        ]
      } else {
        this.advertisingList = [{ value: '0', label: '静态图片' }]
      }
    },
    handleMaxSize (file) {
      if (this.formInline.adType === '1') {
        this.$Message.warning('上传的视频大小不能超过10MB')
      } else if (this.formInline.adType === '0') {
        this.$Message.warning('上传的图片格式错误')
      }
    },
    handleFormatError (file) {
      if (this.formInline.adType === '0') {
        this.$Message.warning('上传的图片格式错误')
      } else if (this.formInline.adType === '1') {
        this.$Message.warning('上传的视频格式错误')
      }
    },
    handleSuccess (response, file, fileList) {
      var _this = this
      if (response.errr_msg !== null && response.full_img_url === null) {
        this.$Message.warning(response.errr_msg)
      }
      var img = new Image()
      img.src = response.full_img_url
      // let temsrc = _this.formInline.mediaUrl
      _this.formInline.mediaUrl = response.full_img_url
      // img.onload = function() {
      // if (img.width !== 128 || img.height !== 128) {
      //   _this.$Message.warning('上传的图片规格不符')
      //   _this.formInline.mediaUrl = temsrc
      // } else {
      _this.imgloaded = true
      // _this.formInline.mediaUrl = response.full_img_url
      // }
      // }
    },
    handleError (response, file, fileList) {},
    delmediaUrl () {
      this.formInline.mediaUrl = ''
      this.imgloaded = false
    },
    handleSubmit () {
      this.$refs['formInline'].validate(valid => {
        if (valid) {
          adplaceSave({
            merchantId: this.$store.state.user.merchantId,
            adPlaceName: this.formInline.adPlaceName,
            channelId: this.formInline.channelId,
            adPlaceType: this.formInline.adPlaceType,
            adType: this.formInline.adType,
            mediaUrl: this.formInline.mediaUrl,
            creatorName: this.$store.state.user.userName,
            creator: this.$store.state.user.userId
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('新增广告位成功')
              this.closePage()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    closePage () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit(
        'setTagNavList',
        this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item))
      )
      this.$nextTick(() => {
        this.$router.push({
          name: 'advertising_space_list'
        })
      })
    }
  }
}
</script>

<style scoped>
.input-wid {
  width: 260px;
}

.replace_tit {
  position: absolute;
  left: 0;
  top: 72px;
  width: 96px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  opacity: 0.8;
  background: #ed4014;
  color: #fff;
}
</style>
